<template>
  <div class="page-content">
      <!-- 主体区域 -->
      <!-- 主体区域 -->
      <el-row :gutter="10" style="margin-bottom:10px">
          <el-col :span="5">
              <el-button type="primary" @click="addBaseDialog = true">新增基地信息</el-button>
          </el-col>
      </el-row>

      <!-- 表格头部 -->
      <table-bar :columns="columns" @changeColumn="changeColumn">
          <div slot="top">
              <el-form label-width="4.375rem">
                  <el-row :gutter="20">
                      <el-col :xs="24" :sm="12" :lg="6">
                          <el-row>
                              <el-col :span="7" style="width: 300px;">
                                  <el-input style="width: 130px;" placeholder="输入数据查询" v-model="searchValue" size="small">
                                  </el-input>
                                  <el-button type="primary" icon="el-icon-search" @click="getEmployee">搜索</el-button>
                              </el-col>
                          </el-row>

                      </el-col>

                  </el-row>
              </el-form>
          </div>
      </table-bar>


      <!-- 表格头部 -->


      </table-bar>

      <!-- 增删改查都要引入这个组件 -->
      <the-table :data="employeeList" :showPage="false" ref="table" v-show="shuxin" style="width: 100%">

          <el-table-column label="头像" prop="profilePhoto">
              <template slot-scope="scope">
                  <el-avatar :src="scope.row.profilePhoto"></el-avatar>
              </template>
          </el-table-column>

          </el-table-column>
          <el-table-column prop="id" label="ID" width="180" v-if="columns[0].show">
          </el-table-column>
          <el-table-column v-model="searchData.username" prop="username" label="姓名" width="180" v-if="columns[1].show">
          </el-table-column>
          <el-table-column prop="phone" label="电话" v-if="columns[2].show">
          </el-table-column>
          <el-table-column prop="sex" label="性别" :formatter="formatRole" v-if="columns[3].show">
          </el-table-column>
          <el-table-column prop="roles[0].name" label="职能" v-if="columns[4].show">

          </el-table-column>


          <el-table-column label="操作" width="180px">
              <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">
                      编辑
                  </el-button>
                  <el-button type="text" style="color: #FA6962" icon="el-icon-delete" @click="removedoperator(scope.row.id)">
                      删除
                  </el-button>
              </template>
          </el-table-column>
      </the-table>


      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryList.page" :page-sizes="[1,2,5,10]"
          :page-size="queryList.size" layout="total, sizes, prev, pager, next, jumper" :total=total>
      </el-pagination>

      <!-- 新建基地信息对话框 -->
      <el-dialog :visible.sync="addBaseDialog" @close="addBaseDialogClose" title="新建基地信息" width="50%" top="20vh">
          <el-form :model="addBaseForm" :rules="addBaseFormRules" ref="addBaseFormRef" inline label-width="100px">
              <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker v-model="addBaseForm.birthday" prop="birthday" type="date" placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                  <el-input v-model="addBaseForm.password"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                  <el-input v-model="addBaseForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="照片" prop="profilePhoto">
                  <el-upload class="avatar-uploader" action="http://localhost:8080/authority/user/web/webRegister" :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                      <img v-if="addBaseForm.profilePhoto" :src="addBaseForm.profilePhoto" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                  <!-- <el-input v-model="addBaseForm.sex"></el-input> -->
                  <el-select v-model="value" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :v-model="addBaseForm.sex">
                      </el-option>
                  </el-select>

              </el-form-item>
              <el-form-item label="姓名" prop="username">
                  <el-input v-model="addBaseForm.username"></el-input>
              </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
              <el-button @click="addBaseDialog = false">取 消</el-button>
              <el-button type="primary" @click="addBaseInfo">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 修改订单弹窗开始 -->
      <el-dialog title="修改商家信息" :visible.sync="editDialogVisible" width="40%" @close="eidtDialogClosed">

          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" inline label-width="100px">
              <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker v-model="editForm.birthday" prop="birthday" type="date" placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                  <el-input v-model="editForm.password"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                  <el-input v-model="editForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="照片" prop="profilePhoto">
                  <el-upload class="avatar-uploader" :action="photoUrl" :show-file-list="false"
                      :on-success="handleAvatarSuccess">
                      <img v-if="editForm.profilePhoto" :src="editForm.profilePhoto" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                  <!-- <el-input v-model="editForm.sex"></el-input> -->
                  <el-select v-model="value" placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :v-model="editForm.sex">
                      </el-option>
                  </el-select>

              </el-form-item>
              <el-form-item label="姓名" prop="username">
                  <el-input v-model="editForm.username"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer">
              <el-button @click="editDialog()">取 消</el-button>
              <el-button type="primary" @click=" editUserInfo()">确 定</el-button>
          </div>
      </el-dialog>
      <!-- 修改订单弹窗结束 -->
  </div>



</template>

<script>

  // import {
  //     getAllDovecoteNumber,
  //     userslist,
  //     edituser,
  //     deleteuser,
  //     adduser,
  //     multipledelete,
  //     machinelist,
  //     editmachine,
  //     deletemachine,
  //     addmachine,
  //     multimachinedelete,
  //     openmachine,
  //     closemachine,
  //     EidtRequest
  // } from "../../../api/Basic/PersonnelInformation";

  export default {
      name: 'PersonnelInformation',
      meta: {
          title: '人员信息'
      },

      data() {
          return {
              //保存需要修改的id
              changeId: "",
              // 控制修改用户对话框的显示与隐藏
              editDialogVisible: false,
              // 查询到的用户信息对象
              editForm: {
                  birthday: "",
                  password: "",
                  // enterpriseId: 0,
                  phone: "",
                  profilePhoto: "",
                  sex: "",
                  username: ""
              },
              // 修改表单的验证规则对象
              editFormRules: {
                  birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
                  password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
                  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  profilePhoto: [{ required: true, message: '请输入图片', trigger: 'blur' }],
                  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
                  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
              },

              options: [{
                  value: '1',
                  label: '男'
              }, {
                  value: '0',
                  label: '女'
              }],
              value: '',

              //新增基地信息对话框
              addBaseDialog: false,
              columns: [
                  {
                      name: "id",
                      show: false,
                  },
                  {
                      name: "姓名",
                      show: true,
                  },
                  {
                      name: "电话",
                      show: true,
                  },
                  {
                      name: "性别",
                      show: true,
                  },
                  {
                      name: "",
                      show: true,
                  },

              ],
              photoUrl:'',
              //分页器数据
              page: 1,
              size: 10,
              total: 0,
              profilePhoto: '',
              shuxin: false,
              //搜索
              searchData: {
                  username: "",
                  id: "",
              },

              receive: [{}],
              layout: "search,refresh",
              searchValue: '',
              // layout:refresh,
              // options: [{
              //     value: '1',
              //     label: 'A01'
              // }, {
              //     value: '2',
              //     label: 'A02'
              // }],
              // value: '',

              enterpriseList: [],
              editDialogVisible: false,
              employeeList1: [], //接收全部数据
              employeeList: [], //接收分页数据
              //页码
              queryList: {
                  page: 1,
                  size: 10,
                  username: ''
              },
              addBaseFormRules: {
                  birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
                  password: [{ required: true, message: '请输入密码', trigger: 'blur' },],
                  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                  profilePhoto: [{ required: true, message: '请输入图片', trigger: 'blur' }],
                  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
                  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
              },
              addBaseForm: {
                  birthday: "",
                  password: "",
                  // enterpriseId: 0,
                  phone: "",
                  profilePhoto: "",
                  sex: "",
                  username: "",
              },
              // 控制新增用户对话框关闭
              addFormRules: {
                  editDialogVisible: false,
                  username: [


                      {
                          required: true,
                          message: '请输入姓名',
                          trigger: 'blur'
                      }, {
                          min: 3, max: 10,
                          message: '长度3~10字符', trigger: 'blur'
                      }
                  ],
                  phone: [

                      {
                          required: true,
                          message: '请输入电话',
                          trigger: 'blur'
                      }, {
                          min: 11, max: 12,
                          message: '长度11~12字符', trigger: 'blur'
                      }
                  ],



              },



          }
      },
      created() {
          //获取信息
          //  this.getEnterpriseInfo()
          this.getEmployee()
          //this.getEnterpriseList()
      },

      methods: {
          handleAvatarSuccess(res, file) {
              this.addBaseForm.profilePhoto = URL.createObjectURL(file.raw);
          },



          async getEmployee() {
              this.shuxin = false;
              console.log("搜索内容", this.searchValue)
              var re = new RegExp("[\u4E00-\u9FA5]+");
              if (re.test(this.searchValue)) {
                  this.searchData.username = this.searchValue;
              } else if (this.searchValue == '') {
                  this.searchData.username = this.searchValue;
                  this.searchData.id = this.searchValue;
              } else {
                  this.searchData.id = this.searchValue;
              }

              console.log("搜索的名字是" + this.searchData.username)
              // this.queryList.username = this.searchData.username;
              //获取全部员工信息
              const { data: res } = await this.$http.get(`/authority/enterprise/enterprise`)
              this.employeeList1 = res.data
              console.log(res);
              if (res.statusCode !== 20000) {
                  return this.$message.error('获取员工信息失败')
              }

              //分页获取员工信息
              const { data: res1 } = await this.$http.get(`/authority/enterprise/enterprise/${this.queryList.page}/${this.queryList.size}`)
              //获取员工列表成功
              // 保存数据
              // for(var i=0; res.dara)
              // console.log(res.data[0].username);
              // console.log(this.searchData.username);
              // console.log(res.data.length);
              //搜索名字
              var j = 0;

              for (var i = 0; i < res.data.length; i++) {
                  if (this.searchData.username == res.data[i].username || this.searchData.id == res.data[i].id) {
                      // this.employeeList = res.data[i];
                      j = 1;
                      this.receive[0] = res.data[i];
                      // console.log(res.data[i]);
                      // console.log(this.receive);
                      this.employeeList = this.receive;

                  }
              }
              if (j == 0) {
                  this.employeeList = res1.data.records
              }
              // console.log(this.receive)

              // this.employeeList = res.data

              //搜索名字之后重新渲染页面
              this.shuxin = true;
              this.profilePhoto = res1.data.records[0].profilePhoto;

              // console.dir(res1.data.records.length);
              //获取全部数据的长度
              this.total = res.data.length;
              // console.dir(res.data[0].profilePhoto)

          },
          // 删除用户信息
          async removedoperator(id) {
              const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).catch(err => err)

              if (confirmResult !== 'confirm') {
                  return this.$message.info('已取消删除操作')
              }
              console.log(111234);
              deleteuser(id).then(
                  res => {
                      console.log(res);
                      this.getEmployee()
                  }
              ).catch(error => {
                  return this.$message.error('获取操作人信息失败')
              })
          },

          //监听Pagesize改变的事件
          handleSizeChange(newSize) {
              console.log(newSize)
              this.queryList.size = newSize
              this.getEmployee()
          },

          //监听页码值改变的事件
          handleCurrentChange(newPage) {
              console.log(newPage)
              this.queryList.page = newPage
              this.getEmployee()
          },

          // 监听添加信息对话框关闭
          addBaseDialogClose() {
              // 表单验证清除
              this.$refs.addBaseFormRef.resetFields()
              // 图片视频清除
              this.$refs.uploadPicRef.clearFiles()
              this.$refs.uploadVedioRef.clearFiles()

          },

          eidtDialogClosed() {
              this.$refs.editFormRef.resetFields()
          },

          editDialog() {
              console.log("关闭")
              this.editDialogVisible = false;
          },

          // ！！！添加人员信息
          addBaseInfo() {
              console.log("日期", this.addBaseForm.birthday)
              var date = new Date(this.addBaseForm.birthday)
              let y = date.getFullYear()
              let m = date.getMonth() + 1
              m = m < 10 ? ('0' + m) : m
              let d = date.getDate()
              d = d < 10 ? ('0' + d) : d
              let h = date.getHours()
              h = h < 10 ? ('0' + h) : h
              let M = date.getMinutes()
              M = M < 10 ? ('0' + M) : M
              let s = date.getSeconds()
              s = s < 10 ? ('0' + s) : s
              let dateTime = y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
              console.log("时间", dateTime)
              this.addBaseForm.birthday = dateTime


              // 表单校验
              this.$refs.addBaseFormRef.validate(async flag => {
                  //发送新增请求


                  const { data: res } = await this.$http.post('/authority/user/web/webRegister', this.addBaseForm)
                  if (res.statusCode !== 20000)
                      return this.$message.error('添加失败')

                  // console.log(res.data.id);
                  // const id = res.data.id

                  this.addBaseDialog = false
                  this.$message.success('添加成功')

                  //刷选列表
                  this.getEmployee()

              })

          },

          // 根据id展示编辑用户的对话框
          async showEditDialog(id) {
              this.editDialogVisible = true;
              this.photoUrl = "http://localhost:8080/authority/user/update?id="+id;
              this.changeId = id;
          },
          changeColumn(columns) {
              this.columns = columns
              this.$refs.table.doLayout()
          },
       


          //点击确认之后将修改的数据传入接口
          async editUserInfo() {
              var obj = {};
              console.log("性别",this.value);
              this.editForm.sex = this.value
              console.log("需要修改的", this.editForm.sex);
              console.log("日期", this.editForm.birthday)
              var date = new Date(this.editForm.birthday)
              let y = date.getFullYear()
              let m = date.getMonth() + 1
              m = m < 10 ? ('0' + m) : m
              let d = date.getDate()
              d = d < 10 ? ('0' + d) : d
              let h = date.getHours()
              h = h < 10 ? ('0' + h) : h
              let M = date.getMinutes()
              M = M < 10 ? ('0' + M) : M
              let s = date.getSeconds()
              s = s < 10 ? ('0' + s) : s
              let dateTime = y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
              console.log("时间", dateTime)
              this.editForm.birthday = dateTime
              console.log("全部数据",this.employeeList1)
              for (var i = 0; i < this.employeeList1.length; i++) {
                  if (this.employeeList1[i].id == this.changeId) {
                      obj = this.employeeList1[i];
                      console.log("需要修改的数据是", obj);
                      // 将editForm的数据赋值给obj，注意要赋值的对象要对应
                     obj = this.editForm
                      console.log("xinshuju",obj)
                      //调用接口，传入的参数为obj
                      this.$refs.editFormRef.validate(async flag => {
                          const { data: res } = await EidtRequest(JSON.stringify(obj),this.changeId);
                      console.log("修改用户请求到的列表", res);
                      if (res.statusCode !== 20000) {
                          this.$message.error("查询数据失败");
                      }
                      // console.log(res)
                  })
                  break;
              }}
              this.getEmployee();   
              this.editDialogVisible = false;
          },

             // 监听修改用户对话框的关闭事件
             eidtDialogClosed() {
              this.$refs.editFormRef.resetFields()
          },

          // 监听添加信息对话框关闭
          addBaseDialogClose() {
              // 表单验证清除
              this.$refs.addBaseFormRef.resetFields()

          },
          async removeUserById(id) {

              const confirmResult = await this.$confirm('此操作将永久删除该人员信息, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).catch(err => err)

              if (confirmResult !== 'confirm') {
                  return this.$message.info('已取消删除操作')
              }
              deleteuser(id).then(
                  res => {
                      console.log(res);
                      this.getEmployee();
                  }
              ).catch(error => {
                  return this.$message.error('删除人员信息失败')
              })

          },

          formatRole: function (row, column) {
              console.log("男女",row.sex)
              return row.sex == "1" ? "男" : '女';
          },




      }
  }
</script>


<style lang="scss" scoped>
  .el-input--suffix .el-input__inner {
      padding-right: 0.9375rem !important;
  }

  .el-textarea__inner {
      min-width: 12.25rem;
  }

  .el-upload {
      margin-left: 1.25rem;
  }

  .upload_container {
      display: flex;
      justify-content: center;
  }

  .upload_label {
      text-align: right;
      width: 6.25rem;
  }

  .el-pagination {
      margin-top: 0.375rem;
      text-align: center;
  }


  .el-upload-list--picture-card .el-upload-list__item {
      margin: 0 0.5rem 0.5rem 0.5rem;
  }

  .page-content {
      width: 100%;
      height: 100%;
  }

  .avatar {
      width: 3.125rem;
      height: 3.125rem;
      border-radius: 50%;
  }

  .page {
      margin-top: 0.375rem;
      text-align: center;
  }
</style>